<template>
  <header class="header">
    <nav class="nav" :class="$route.path === '/bigScreen/screenC/left' ? 'left-active' : 'left'" @click="$router.push('/bigScreen/screenC/left')">
    </nav>
    <nav class="nav" :class="$route.path === '/bigScreen/screenC/center' ? 'center-active' : 'center'" @click="$router.push('/bigScreen/screenC/center')">
    </nav>
    <nav class="nav" :class="$route.path === '/bigScreen/screenC/right' ? 'right-active' : 'right'" @click="$router.push('/bigScreen/screenC/right')">
    </nav>
  </header>
</template>

<script setup lang="ts" name="NavBar">

</script>

<style scoped lang="less">
.header{
  width: 168 * 3px;
  height: 50px;
  position: absolute;
  top: 14px;
  left: 880px;
  display: flex;
  justify-content: space-between;
  .nav{
    width: 168px;
    height: 100%;
    color: #ededed;
  }
  .left{
    background-image: url(../assets/left.svg);
  }
  .left-active{
    transition: all 1s;
    background-image: url(../assets/left-active.svg);
  }
  .center{
    background-image: url(../assets/center.svg);
  }
  .center-active{
    transition: all 1s;
    background-image: url(../assets/center-active.svg);
  }
  .right{
    background-image: url(../assets/right.svg);
  }
  .right-active{
    transition: all 1s;
    background-image: url(../assets/right-active.svg);
  }
}
</style>
